<script src="lib/tracking.min.js"></script>
<script src="lib/face.min.js"></script>

<video id="player" width="480" height="320" preload autoplay loop muted></video>
<canvas id="canvas" width="480" height="320"></canvas>

<script>
  const player = document.getElementById('player');
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');

  const tracker = new tracking.ObjectTracker('face');
  tracker.setInitialScale(2);
  tracker.setStepSize(2);
  tracker.setEdgesDensity(0.1);

  tracking.track('#player', tracker, { camera: true });
  tracker.on('track', (event) => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(player, 0, 0, canvas.width, canvas.height);
    event.data.forEach((rect) => {
      ctx.strokeStyle = '#a64ceb';
      ctx.strokeRect(rect.x, rect.y, rect.width, rect.height);
      ctx.font = '11px Helvetica';
      ctx.fillStyle = "#fff";
      ctx.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);
      ctx.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22);
      // tracker.removeAllListeners();
    });
  });
</script>